<template>
  <div class="contacts-import">
    <flexbox v-if="detail" class="cell" align="stretch">
      <img src="/src/assets/img/crm/customer.png" class="cell-hd">
      <div class="cell-bd">
        <p class="cell-bd__name">
          <span>{{ detail.customerName }}</span>
        </p>
        <div class="cell-bd__detail">
          <i class="wk wk-circle-iphone"/>
          <span v-if="detail.mobile">{{ detail.mobile }}</span>
          <span v-else class="no-data">暂无电话</span>
          <div class="deal-info">
            <span :class="[ 'mark', isDeal ? 'mark-suc' : 'mark-un' ]">
              <i :class="dealIcon"/>{{ dealName }}</span>
          </div>
        </div>
      </div>
    </flexbox>

    <ImportantInfo v-if="list.length" :list="list" :detail="detail"/>

  </div>
</template>

<script setup>
import {crmCustomerReadAPI} from '/src/api/crm/customer'
import crmTypeModel from '/src/views/crm/model/crmTypeModel'
import {filedGetInformationAPI} from '/src/api/crm/common'
import ImportantInfo from '../../componentsNew/ChieflyContacts/ImportantInfo.vue'
import {computed, defineOptions, getCurrentInstance, onBeforeMount, onMounted, ref, watch} from "vue";

// 引入消息总线
const cxt = getCurrentInstance() //相当于Vue2中的this
const bus = cxt.appContext.config.globalProperties.$bus

defineOptions({
  // 联系人的重要信息
  name: 'ChieflyContacts',
})

const properties = defineProps({
  // crmType还要放，不同的模块中需要使用
  crmType: {
    required: true,
    type: String,
    default: ''
  },
  id: [Number, String],
  customerId: [Number, String]
})

// 客户详情
const detail = ref(null)
// 联系人基本信息
const list = ref([])


// 有首要联系人
const hasInfo = computed(() => {
  return properties.id && properties.customerId
})

// 是成交
const isDeal = computed(() => {
  return detail.value.dealStatus == 1
})

const dealIcon = computed(() => {
  return isDeal.value ? 'wk wk-success' : 'wk wk-close'
})

const dealName = computed(() => {
  return isDeal.value ? '已成交' : '未成交'
})


watch(() => properties.customerId, () => {
  detail.value = null
  list.value = []
  getDetial()
})

watch(() => properties.id, () => {
  detail.value = null
  list.value = []
  getDetial()
})


function created() {
  bus.on('crm-detail-update', (data) => {
    getBaseInfo()
  })
}

created();


onMounted(() => {
  getDetial()
})

onBeforeMount(() => {
  bus.off('crm-detail-update')
})


/**
 * 获取联系人详情
 */
function getDetial() {
  if (hasInfo.value) {
    crmCustomerReadAPI({
      customerId: properties.customerId
    }).then(res => {
      console.log("res", res)
      detail.value = res.data.data
    }).catch(() => {
    })
    getBaseInfo()
  }
}

/**
 * 获取基础信息
 */
function getBaseInfo() {
  filedGetInformationAPI({
    // 这里不能写死，customer和business使用
    types: crmTypeModel[properties.crmType],
    id: properties.id
  }).then(res => {
    list.value = res.data.data
  }).catch(() => {
  })
}
</script>


<style lang="scss" scoped>
.contacts-import {
  overflow: auto;
  height: 100%;
  padding: 15px;
  overflow-y: overlay;
}

.cell {
  padding: 12px;
  border-radius: $xr-border-radius-base;
  position: relative;
  border: 1px solid #EBEEF5;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);

  &-hd {
    position: relative;
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    margin-right: 10px;
  }

  &-bd {
    flex: 1;

    &__name {
      font-size: 14px;
      font-weight: 600;
      color: #333333;
      margin-top: 10px;
      margin-bottom: 2px;
    }

    &__detail {
      font-size: 12px;
      color: #333333;
      margin-top: 8px;

      i {
        color: $xr-color-primary;
        font-size: 13px;
      }

      .no-data {
        color: #999;
      }
    }
  }
}

.deal-info {
  margin-top: 6px;
  font-size: 12px;
}

.mark {
  display: inline-block;
  border-radius: $xr-border-radius-base;
  padding: 4px 8px;

  &-suc {
    background-color: #F4FFF4;
  }

  &-un {
    background-color: #FFF4F4;
  }

  .wk {
    font-size: 12px;
    margin-right: 3px;
  }

  .wk-success {
    color: #20b559;
  }

  .wk-close {
    color: #f95a5a;
  }
}


</style>
